class Tab {
    constructor(id) {
        this.container = document.querySelector(id);
        this.add = this.container.querySelector('.tabadd');
        this.ul = this.add.previousElementSibling;
        this.tabscon = this.container.querySelector('.tabscon');
        this.init();
        this.ul.addEventListener('selectstart', function(e) {
            e.preventDefault();
        });
    }

    // 解决新添加的tab无法clearClass和没有click事件的问题而增加的方法
    updateNode() {
        this.lis = this.ul.querySelectorAll('li');
        this.sections = this.tabscon.querySelectorAll('section');
    }

    init() {
        this.updateNode();
        for (let i = 0; i < this.lis.length; i++) {
            const element = this.lis[i];
            element.onclick = function() {
                tab.toggleTab(element, i);
            };
            element.lastElementChild.onclick = function(e) {
                e.stopPropagation();
                tab.removeTab(element, i);
            };
            element.ondblclick = function() {
                tab.editTab(element.children[0]);
            };
            const sec = this.sections[i];
            sec.ondblclick = function() {
                tab.editTab(sec);
            };
        }
        this.add.onclick = function(e) {
            tab.addTab();
        };
    }

    toggleTab(element, index) {
        this.clearClass();
        element.className = 'liactive';
        this.sections[index].className = 'conactive';
    }

    addTab() {
        this.clearClass();
        const random = Math.random();
        const li = '<li class="liactive"><span>新添加</span><span class="iconfont icon-guanbi"></span></li>';
        const section = '<section class="conactive">新添加' + random + '</section>';
        // 把字符串追加到html元素中
        this.ul.insertAdjacentHTML('beforeend', li);
        this.tabscon.insertAdjacentHTML('beforeend', section);
        this.init();
    }

    removeTab(element, index) {
        if (element.className === 'liactive') { // 当前选中
            if (element.previousElementSibling) { // 前面有元素
                element.previousElementSibling.click();
            } else { // 前面没有元素
                if (element.nextElementSibling) { // 后面有元素
                    element.nextElementSibling.click();
                } else { // 没有其他元素
                    return
                }
            }
        }
        element.remove();
        element.onclick = null;
        this.sections[index].remove();
        this.sections[index].onclick = null;
        this.init();
    }

    // 修改某个元素
    editTab(element) {
        element.innerHTML = '<input type="text" value = ' + element.innerHTML + '>';
        const ipt = element.children[0];
        ipt.select();
        ipt.onblur = function() {
            element.innerHTML = ipt.value;
        };
        ipt.onkeyup = function(e) {
            if (e.keyCode === 13) {
                ipt.blur();
            }
        }
    }

    clearClass() {
        for (let i = 0; i < this.lis.length; i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
}

const tab = new Tab('#tab');